Component Basics (1/6)
How do you create and use a Svelte component?

    In Svelte, a **component** is a reusable building block that contains HTML, CSS, and JavaScript in a single `.svelte` file. Components help you organize your code and create modular, maintainable applications.

    To create a component, simply make a new `.svelte` file. Each file represents a single component.

    Example: Button.svelte

    This component accepts a `label` prop and shows a styled button. The `export` keyword makes the `label` available to parent components.

    You can now use the `Button` component in another Svelte file by importing it and placing it in the markup.

    Example: App.svelte

    Here, the `Button` component is imported and used multiple times with different `label` props. Svelte automatically renders each instance independently.

    Props are used to pass data **from a parent to a child component**, similar to how attributes work in HTML.

    Parent to Child Example
    A `.svelte` file usually includes:
    • <script> — Contains logic, variables, and exported props.
    • <style> — Contains CSS scoped to this component.
    • HTML markup — The structure of the component.

    By combining these three parts, Svelte allows you to build highly reusable, encapsulated UI pieces.